<template>
  <div class="h-full w-full overflow-y-auto overflow-x-hidden bg-white p-2">
    <table class="w-full px-4 py-2 text-left">
      <template v-for="item in tonghua_plate_info" :key="item.code">
        <tr class="border-b border-dashed">
          <td class="px-1.5 py-1.5 font-semibold">
            <div class="h-6 w-6 text-center text-lg">
              <div v-if="item.order == 1" class="bg-red-500 text-white">
                {{ item.order }}
              </div>
              <div v-else-if="item.order == 2" class="bg-orange-300 text-white">
                {{ item.order }}
              </div>
              <div v-else-if="item.order == 3" class="bg-yellow-300 text-white">
                {{ item.order }}
              </div>
              <div v-else>{{ item.order }}</div>
            </div>
          </td>
          <td class="cursor-pointer px-1.5 py-1.5 text-blue-500" @click="click(item.name)">
            {{ item.name }}
          </td>
          <td class="px-1.5 py-1.5 text-right">
            <ChangePercent :percent="item.rise_and_fall / 100"></ChangePercent>
          </td>
          <td class="cursor-pointer whitespace-nowrap px-1.5 py-1.5 text-right text-sm text-red-500">
            <span class="px-1.5.5 mr-2 rounded py-0.5 text-sm text-red-500" v-if="item.tag">
              {{ item.tag }}
            </span>
          </td>
        </tr>
      </template>
    </table>
  </div>
</template>
<script setup>
import axios from 'axios';
import { ref } from 'vue';
const tonghua_plate_info = ref([]);
function fetchData() {
  axios.get('https://dq.10jqka.com.cn/fuyao/hot_list_data/out/hot_list/v1/plate?type=concept').then(function (res) {
    let result = res.data.data.plate_list;
    tonghua_plate_info.value = result.slice(0, 5);
  });
}

function click(name) {
  let url = 'http://www.iwencai.com/unifiedwap/result?w=' + name + '&querytype=&issugs';
  window.open(url);
}
defineExpose({
  fetchData,
});
</script>
